/* 断点 */
$breakpoints: (
  xs: 320px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

/* 字体大小 */
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 1.5rem;    // 24px

/* 字体粗细 */
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

/* 行高 */
$line-height-tight: 1.25;
$line-height-base: 1.5;
$line-height-loose: 1.75;

/* 间距 */
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-base: 1rem;     // 16px
$spacing-lg: 16px;
$spacing-xl: 24px;
$spacing-xxl: 2rem;      // 32px

/* 圆角 */
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-circle: 50%;

/* 阴影 */
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* 过渡 */
$transition-fast: 0.15s ease;
$transition-base: 0.3s ease;
$transition-slow: 0.5s ease;
$transition-duration: var(--transition-duration);

/* z-index */
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: var(--z-index-modal);
$z-index-popover: 1060;
$z-index-tooltip: 1070;

/* 颜色变量 */
$primary-color: var(--primary-color);
$success-color: var(--success-color);
$warning-color: var(--warning-color);
$danger-color: var(--danger-color);
$info-color: var(--info-color);

$background-color: var(--background-color);
$background-color-light: var(--background-color-light);
$background-color-card: var(--background-color-card);

$text-color: var(--text-color);
$text-color-secondary: var(--text-color-secondary);
$text-color-tertiary: var(--text-color-tertiary);
$text-color-disabled: var(--text-color-disabled);

$border-color: var(--border-color);
$border-color-light: var(--border-color-light);
$border-color-dark: var(--border-color-dark);

/* 组件变量 */
$navbar-height: var(--navbar-height);
$tabbar-height: var(--tabbar-height);
$sidebar-width: var(--sidebar-width);

/* z-index变量 */
$z-index-navbar: var(--z-index-navbar);
$z-index-tabbar: var(--z-index-tabbar);
$z-index-popup: var(--z-index-popup);
$z-index-toast: var(--z-index-toast);

/* 混合器 */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin multi-ellipsis($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
} 